{% extends "base.html" %}
{% load debate_tags static i18n %}

{% block page-alerts %}
  {% if speaker_categories_length == 0 %}
    {% tournamenturl 'participants-speaker-categories-edit' as categories_url %}
    {% blocktrans trimmed asvar message %}
      It looks like there aren't any speaker categories are defined. If you'd like to produce category-specific speaker tabs, such as a novice or ESL tab, use the <a href="{{ categories_url }}" class="alert-link">Speaker Categories</a> page to define them, then return to this page to set speaker eligibility.
    {% endblocktrans %}
    {% include 'components/alert.html' with type='warning' %}
  {% endif %}
{% endblock %}

{% block content %}

  <div id="vueMount">
    <checkbox-tables-container :tables-data=tablesData
                               :categories=categories
                               :urls=urls
                               :navigation=navigation
                               :hide-auto-save=hideAutoSave
                               orientation={{ tables_orientation|safe }} >
    </checkbox-tables-container>
  </div>

{% endblock %}

{% block js %}

  <script>
    window.vueData = {
      tablesData: {% if tables_data %}{{ tables_data|safe }}{% else %}null{% endif %},
      categories: {{ speaker_categories|safe }},
      urls: { 'save': "{% tournamenturl 'participants-speaker-update-eligibility' %}" },
      hideAutoSave: false,
      navigation: [
        { title: 'Participants List',
          url: "{% tournamenturl 'participants-list' %}" },
        { title: 'Speaker Categories',
          url: "{% tournamenturl 'participants-speaker-categories-edit' %}" },
        { title: 'Speaker Eligibility',
          url: "{% tournamenturl 'participants-speaker-eligibility' %}" }
      ]
    }
  </script>
  {{ block.super }}
{% endblock %}
